<template>
  <div style="margin:20px 250px">
    <div id="linePoint"></div>
  </div>
</template>

<script>
import * as G2 from '@antv/g2'
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    initCharts() {
      const data = [
        { time: "1月", '订单量': 200, '订单金额': 200 },
        { time: "2月", '订单量': 600, '订单金额': 300 },
        { time: "3月", '订单量': 200, '订单金额': 500 },
        { time: "4月", '订单量': 900, '订单金额': 100 },
        { time: "5月", '订单量': 250, '订单金额': 300 },
        { time: "6月", '订单量': 200, '订单金额': 100 },
        { time: "7月", '订单量': 150, '订单金额': 200 },
        { time: "8月", '订单量': 401, '订单金额': 200 },
        { time: "9月", '订单量': 700, '订单金额': 500 },
        { time: "10月", '订单量': 900, '订单金额': 240 },
        { time: "11月", '订单量': 700, '订单金额': 290 },
        { time: "12月", '订单量': 300, '订单金额': 210 },
      ];
      const chart = new G2.Chart({
        container: "linePoint",
        autoFit: true,
        height: 500,
        padding: [90, 50, 30, 50], // 上，右，下，左
      });
      chart.data(data);
      chart.scale({
        '订单金额': {
          min: 0,
          max: 2000,
        },
        '订单量': {
          min: 0,
          max: 1000,
        },
      });
      chart.legend({
        custom: true,
        position:'top-right',
        offsetY: 0,
        items: [
          {
            value: "订单量",
            name: "订单量",
            marker: { symbol: "circle", style: { fill: "#1890FF", r: 5 } },
          },
          {
            value: "订单金额",
            name: "订单金额",
            marker: {
              symbol: "circle",
              style: { fill: "#bcbcbc", r: 5 },
            },
          },
        ],
      });
      chart.axis("订单金额", {
        grid: null,
        title: null,
        label: {
          style: {
            fill: "#666",
          },
          formatter: v=> {
            return v+' 元'
          }
        },
        
      });
      chart.axis("订单量", {
        title: null,
        label: {
          formatter: v=> {
            return v+' 个'
          }
        }
      });
      chart.annotation().text({
        top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
        position: ['start', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
        content: '订单量', // 显示的文本内容
        style: {  // 文本的图形样式属性
          fill: '#666', // 文本颜色
          fontSize: '12', // 文本大小
        }, // 文本的图形样式属性
        offsetX: -45, // x 方向的偏移量
        offsetY: -20, // y 方向偏移量
      })
      chart.annotation().text({
        top: true, // 指定 giude 是否绘制在 canvas 最上层，默认为 false, 即绘制在最下层
        position: ['end', 'end'], // 文本的起始位置，值为原始数据值，支持 callback
        content: '订单金额', // 显示的文本内容
        style: {  // 文本的图形样式属性
          fill: '#666', // 文本颜色
          fontSize: '12', // 文本大小
        }, // 文本的图形样式属性
        offsetX: 0, // x 方向的偏移量
        offsetY: -20, // y 方向偏移量
      })
      chart.tooltip({
        shared: true,
        showMarkers: false,
      });
      chart
        .interval()
        .position("time*订单量")
        .color("#1890FF")
      chart
        .line()
        .position("time*订单金额")
        .color("#e8e8e8")
        .size(3)
        .shape("line");
      chart
        .point()
        .position("time*订单金额")
        .color("#e8e8e8")
        .size(3)
        .shape("circle");

      chart.interaction("active-region");
      chart.removeInteraction("legend-filter"); // 自定义图例，移除默认的分类图例筛选交互
      chart.render();
    },
  },
  mounted() {
    this.initCharts()
  },
  activated() {
    
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
